<template>
	<view class="recommend">
		<view class="title" style="">
			<view style="font-weight: 800;font-size: 40rpx;color: #303B39;z-index: 99;position: relative;">
				{{type==3?'':disname}}{{type==1?'疾病知识':type==2?'疾病指南':'推荐文章'}}
				<view class="pos-abs titleline">
				</view>
			</view>
			<view v-if="type!=3" @click="tomore(type)" class="more">更多<image src="@/static/images/home/more.png" class=""
					style="width: 32rpx;height: 32rpx;">
				</image>
			</view>
		</view>

		<ul class="recomlist">
			<li class="recomli" v-for="(item,index) in list" :key="index">
				<view class="leftbox">{{type==1||type==3?'知':'指'}}</view>
				<view class=" righttext lineclamp2" @click="toNews(item.id)">
					{{item.name}}
				</view>
			</li>
		</ul>
	</view>
</template>

<script>
	export default {
		props:['type','disname','disid','list'],
		data(){
			return{
				
			}
		},
		methods:{
			toNews(id) {
				console.log(this.type)
				let url = ''
				if(this.type==1){
					url = '/pages/knowledge/zsnewsdetail?id=' + id
				}else if(this.type==2){
					url = '/pages/knowledge/znnewsdetail?id=' + id
				}else{
					url = '/pages/knowledge/drugnews?id=' + id
				}
				uni.navigateTo({
					url: url
				});
			},
			tomore(type){
				let moreurl = ''
				if(type==1){
					moreurl = '/pages/knowledge/detail?id='+this.disid
				}else if(type==2){
					moreurl = '/pages/knowledge/diseaseGuide?id='+this.disid
				}else{
					moreurl = '/pages/knowledge/druglist?id='+this.disid
				}
				uni.navigateTo({
					url: moreurl
				})
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	.recommend {
		border-radius: 24rpx;
		margin-top: 16rpx;
		background: #fff;
		box-sizing: border-box;
		padding: 32rpx 24rpx;
	
		.title {
			position: relative;
			padding: 0 16rpx;
			display: flex;
			justify-content: space-between;
	
			.titleline {
				bottom: 0;
				left: 0;
				height: 16rpx;
				width: 100%;
				background: #00D9B2;
				border-radius: 50rpx;
				z-index: -1;
			}
	
			.more {
				display: flex;
				align-items: center;
				font-weight: 500;
				font-size: 24rpx;
				color: #576260;
			}
		}
	
		.recomlist .recomli:last-child {
			border-bottom: none;
		}
	
		.recomlist {
			.recomli {
				padding: 24rpx 0;
				display: flex;
				border-bottom: 1rpx dashed #D7DDDC;
	
				.leftno {
					width: 30rpx;
					height: 30rpx;
					color: #fff;
					font-weight: bold;
					font-size: 24rpx;
					line-height: 30rpx;
					text-align: center;
					border-radius: 6rpx;
					flex-shrink: 0;
					margin-top: 13rpx;
					margin-right: 18rpx;
				}
	
				.leftbox {
					width: 40rpx;
					height: 42rpx;
					color: #fff;
					font-weight: bold;
					font-size: 24rpx;
					line-height: 42rpx;
					text-align: center;
					border-radius: 6rpx;
					flex-shrink: 0;
					margin-top: 13rpx;
					margin-right: 18rpx;
					background: linear-gradient(252deg, #00D9B2 0%, #00F3C8 100%);
				}
	
				.righttext {
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					font-size: 36rpx;
					color: #303B39;
					line-height: 56rpx;
					text-align: left;
				}
	
				.noone {
					background: linear-gradient(357deg, #FC1C12 0%, #FD6F23 100%);
				}
	
				.notwo {
					background: linear-gradient(357deg, #FC4A14 0%, #FF9F1B 100%);
				}
	
				.nothree {
					background: linear-gradient(357deg, #FB7511 0%, #FECA18 100%);
				}
	
			}
		}
	}
</style>